<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
// 获取指定元素的样式属性值
// 参数：e表示具体的元素，n表示要获取元素的脚本样式的属性名，如"width"、"borderColor"
// 返回值：返回该元素e的样式属性n的值
function getStyle(e,n){
    if(e.style[n]){ 
	// 如果在Style对象中存在，说明已显式定义，则返回这个值
        return e.style[n];
    }
    else if(e.currentStyle){ 
	// 否则，如果是IE浏览器，则利用它的私有方法读取当前值
        return e.currentStyle[n];
    }
    // 如果是支持DOM标准的浏览器，则利用DOM定义的方法读取样式属性值
    else if(document.defaultView && document.defaultView.getComputedStyle){
        n = n.replace(/([A-Z])/g,"-$1");	// 转换参数的属性名
        n = n.toLowerCase();
        var s = document.defaultView.getComputedStyle(e,null); 
		// 获取当前元素的样式属性对象
        if(s) 							// 如果当前元素的样式属性对象存在
            return s.getPropertyValue(n); 	// 则获取属性值
    }
    else									// 如果都不支持，则返回null
        return null;
}


// 完善获取鼠标指针在元素内的位置
// 参数：e表示当前事件对象，o表示当前元素
// 返回值：返回鼠标相对元素的坐标对象，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离
function getME(e, o){
    var e = e || window.event;
    // 获取元素左侧边框的宽度
    // 调用getStyle()扩展函数获取边框样式值，并尝试转换为数值，如果转换成功，则赋值。
    // 否则判断是否定义了边框样式，如果定义边框样式，且值不为none，则说明边框宽度为默认值，即为3像素。
    // 如果没有定义边框样式，且宽度值为auto，则说明边框宽度为0
    var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);
    // 获取元素顶部边框的宽度，设计思路与获取左侧边框方法相同
    var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle != 
"none" ) ? 3 : 0);
    var x = e.offsetX ||					// 一般浏览器下鼠标偏移值
            (e.layerX - o.offsetLeft - bl); 
	// 兼容Mozilla类型浏览器，减去边框宽度
    var y = e.offsetY ||					// 一般浏览器下鼠标偏移值
            (e.layerY - o.offsetTop - bt); 
	// 兼容Mozilla类型浏览器，减去边框宽度
    var u = navigator.userAgent; 			// 获取浏览器的用户数据
    if( (u.indexOf("KHTML") > - 1) ||
        (u.indexOf("Konqueror") > - 1) ||
        (u.indexOf("AppleWebKit") > - 1)
    ){ 		// 如果是Safari浏览器，则减去边框的影响
        x -= bl; 
        y -= bt; 
    }
    return {// 返回兼容不同浏览器的鼠标位置对象，以元素边框内壁左上角为定位原点
        x : x,
        y : y
    }
}




</script>
</head>
<body>

<div id="box" style="width:200px;height:200px;border:solid 1px red;float:right;"></div>
<textarea id="t" cols="15" rows="4" ></textarea>

<script  type="text/javascript">

var t = document.getElementById("t");
var b = document.getElementById("box");

b.onmousemove = function(e){
    var m = getME(e,b);
    t.value ="mouseX = " + m.x  + "\n" + "mouseY = " + m.y
}
</script>



</body>

